
.shop-index{
    padding:  20rpx;
    background: $my-main-bg;
    min-height: 100vh;
    box-sizing: border-box;
  
    
}



.whitebg{
   background: #fff;
   color:#333;
   .return{
       border-color: #333;
   }
}

%cosmetologyTitle{
    height:32rpx;
    display: block;
    margin: 0 auto 30rpx;
}

%cosmetologyBanner{
       width: 710rpx;
       height: 180rpx;
       display: block;
       margin: 0rpx auto 40rpx;
}

%integralCard {
  float: right;
  position: relative;
  z-index: 1;
  width: 345rpx;
  box-shadow: 0rpx 2rpx 10rpx 2rpx #e2e2e2;
  image {
    width:100%;
    height: 150rpx;
  }
   view {

     overflow: hidden;
     line-height: 24rpx;

     ~view {
       line-height: 30rpx;
       position: absolute;
       bottom: 0rpx;
       left: 10rpx;
       right: 20rpx;

     }
   }

 .title {
   font-size: 24rpx;
   color: #666;
 }


  .now {
    font-size: 18rpx;
    color: #ff0000;
    margin-right: 10rpx;
    text {
      font-size: 30rpx;
    }

  }

  .old {
    font-size: 20rpx;
    color: #999;
    text-decoration: line-through;
  }

  .num {
    float: right;
    font-size: 22rpx;
    color: #999;
    margin-top:5rpx;

  }

}

%shopTitle{
    height: 80rpx;
    line-height: 80rpx;
 
    border-left:8rpx solid $my-main-color;
   
    font-size: 36rpx;
    color:#000;
    padding-left: 20rpx;
    position: relative;
}

.cosmetology{
        &-title{
            @extend %shopTitle;
            background: #fff;
            margin-bottom: 30rpx;

        }
        &-group{
           
            background: #f5f5f5;
         
            position: relative;
            
        }
    
        &-img{
            @extend %cosmetologyBanner;
            &_01{
                 @extend %cosmetologyBanner;
               
                margin: -10rpx auto 40rpx;
            }
            &_02{
                @extend %cosmetologyBanner;
                height:98rpx;
            }

            
        }
        &-view{
            min-height: 100vh;
            
        }
        &-banner{
            position: relative;
            z-index: 1;
            height:484rpx;
           
            image{
                height:100%;
                width: 100%;
            }    
        }
        
      

        &-list{
            overflow: hidden;
         
        }
}




.integral{
    &-card{
        @extend %integralCard;
        float: right;
        &:last-child{
            margin-top: 20rpx;
        }
        &:first-child{
                float:left;
                image{
                    height:320rpx ;
                }
        }
       
        
       
      
    }
    &-shade{
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          height: 76rpx;
          padding: 10rpx;
          box-sizing: border-box;
          background: rgba(255, 255, 255, 0.8);
           overflow: hidden;
    }
}




  .cosmetology {

    &-info {

     background:#fff;
  
      border-radius: 10rpx;
     margin-bottom: 30rpx;
      z-index: 9;
      position: relative;
      .phone{
        position: absolute;
        right:135rpx;
        top:32rpx;
        width: 34rpx;
        height: 42rpx;
        z-index: 3;
      }
      .t{
        position: absolute;
        top:0;
        right:-60rpx;
      }
      .distance{
          position: absolute;
          top:0;
          right:-60rpx;
      }
      .share{
        position: absolute;
        right:32rpx;
        top:32rpx;
        width: 42rpx;
        height: 42rpx;
        z-index: 3;
        image{
            position: absolute;
            top:0;
            left:0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        button{
            position: absolute;
            top:0;
            left:0;
            width: 100%;
            height: 100%;
            z-index: 2;
            opacity: 0;
        }
    }

    }



  }

  .beautycard{
    width: 345rpx;
    float:right;
    vertical-align: top;
    margin-bottom: 20rpx;
    &:nth-child(odd){
      float:left;
    }
  }

  .shop{
   
    &-info{
  
        width: 600rpx;
        padding: 30rpx;
        box-sizing: border-box;
    
     
        .n{
            font-size:36rpx;
            font-weight: bold;
            color:#000;
            margin-bottom: 20rpx;
            width: 100%;
            overflow: hidden;
            
            box-sizing: border-box;
        }
        .a{
            color:#666;
            font-size:24rpx;
            position: relative;
            padding-right:120rpx;
            line-height:1.5;
            .text{
                position: absolute;
                right:0;
                bottom:0;
            }
            image{
                margin-right:5rpx;
                width: 24rpx;
                height: 24rpx;
                overflow: hidden;
                transform: translateY(1px);
                
            }
        }
    }
    &-introduce{
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.5s ease 0s;
        .title{
          @extend %shopTitle; 
          background: $my-main-bg;
          
        }
        .content{
            background: #fff;
            padding: 48rpx 20rpx;
        }
    }
}


.beauty-ad{
    background: #f5f5f5;
    padding: 5rpx 10rpx;
    scroll-view{
        width: 100%;
        height:250rpx;
       
        
    }
    .list{
        display: flex;
        flex-direction: row;
      
    }
    .item{
        width: 730rpx;
        height: 250rpx;
        display: block;
        margin-right:10rpx;
        &:last-child{
            margin-right: 0;
        }
        image{
            width: 730rpx;
            height: 250rpx;
        }
    }
}

.horizontal{
    .beautycard{
        width: 100%;
       
     
    }
    .shopcard{
        width:100%;
        display: flex;
        &-img{
            width: 200rpx;
            height: 200rpx;
            image{
                width: 200rpx;
                height: 200rpx;
            }
        }
        .box{
            width: 510rpx;
            box-sizing: border-box;
        }
        .now{
            display: block;
            margin-bottom: 20rpx;
        }
    }
}

.horizontal2vertical{
    position: absolute;
    top:0;
    right:0;
    height: 25rpx;
    
    .item{
        width: 25rpx;
        height: 25rpx;
        display: inline-block;
        vertical-align: top;
        margin: 0 20rpx;
    }
    image{
        width: 25rpx;
        height: 25rpx;
    }
}

.handle-shop-introduce{
    text-align: center;
    .icon{
        @extend .allow-down1;
        display: inline-block;
        vertical-align: top;
        transition: all 0.5s ease 0s;
    }
}

.show-shop-introduce{
    max-height: 100vh;
    .icon{
        transform: rotate(180deg);
    }
}